<template>
  <div class="app-config">
    <Form ref="platformRef">
      <CellGroup title="同步平台产品">
        <!-- @vue-ignore -->
        <Field
          :model-value="platformMap[params.syncType]"
          is-link readonly clickable
          name="syncType" label="平台产品"
          placeholder="请选择平台"
          :rules="[{ required: true, message: '请选择平台' }]"
          @click="handleShowCardModal">
          <template #right-icon>
            <Tag type="primary">平台</Tag>
          </template>
        </Field>
        <div class="sync-flash">
          <Button type="primary" block
            :loading="syncLoading"
            @click="handleCardSync">同步平台产品</Button>
        </div>
      </CellGroup>
      <CellGroup title="平台抽成点">
        <div class="form">
          <Field v-model="params.rate"
            class="query" name="rate"
            autocomplete="off" type="number"
            :rules="[{ required: true, message: '请设置平台抽成点' }]"
            placeholder="设置平台抽成点" />
          <Button type="primary" block
            :loading="platformLoading"
            @click="handlePlatformSet">设置抽成</Button>
        </div>
      </CellGroup>

      <CellGroup title="设置默认启动平台">
        <Field
          :model-value="platformMap[params.platformType]"
          is-link readonly clickable
          name="platformType" label="默认启动平台"
          placeholder="请设置默认启动平台"
          :rules="[{ required: true, message: '请设置默认启动平台' }]"
          @click="handleShowDefaultModal">
          <template #right-icon>
            <Tag type="primary">平台</Tag>
          </template>
        </Field>
        <div class="sync-flash">
          <Button type="primary" block
            :loading="platformDefaultLoading"
            @click="handleDefaultCard">设置启动平台</Button>
        </div>
      </CellGroup>
    </Form>

    <div v-role="'ROOT'">
      <Divider>ROOT 用户可见</Divider>
      <CellGroup title="同步处理讯卡未处理订单">
        <div class="sync-flash">
          <Button type="primary" block
            :loading="loading"
            @click="handleCardProcessOrder">同步处理讯卡未处理订单</Button>
        </div>
      </CellGroup>
    </div>
  </div>
  <Modals />
</template>
<script setup lang="ts">
import {
  Button, CellGroup, Divider, Field,
  Form,
  showConfirmDialog,
  showFailToast,
  Tag,
} from 'vant';
import { onMounted } from 'vue';

import Modals, { ModalPlatformType } from '../components';
import useAppConfg from '../hooks/useAppConfg';
import useRootConfig from '../hooks/useRootConfig';
import { PlatformTypeItem } from '../models/PlatformConfig';

const {
  fetchRate,
  fetchSyncList,
  fetchCurPlat,
  platformRef,

  statePlatform,
  platformMap,
  params,
  syncLoading,
  platformLoading,
  platformDefaultLoading,
  handleSync,
  handlePlatform,
  handlePlatformDefault,
} = useAppConfg();

const {
  loading,
  handleProcessOrder,
} = useRootConfig();

onMounted(async () => {
  await Promise.all([
    fetchSyncList(),
    fetchRate(),
    fetchCurPlat(),
  ]);
});

const handleShowCardModal = () => {
  ModalPlatformType.show({
    title: '选择平台',
    options: statePlatform.value.data,
    value: params.value.syncType,
    emit: (option: PlatformTypeItem) => {
      params.value.syncType = option.platformType;
    },
  });
};

const handleCardSync = async () => {
  try {
    await platformRef.value.validate('syncType');
    showConfirmDialog({
      title: '提示',
      message: '确认同步平台产品？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      handleSync();
    });
  } catch (error) {
    showFailToast('请填写完整信息');
  }
};

const handlePlatformSet = async () => {
  try {
    await platformRef.value.validate('rate');
    showConfirmDialog({
      title: '提示',
      message: '确认设置平台抽成点？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      handlePlatform();
    });
  } catch (error) {
    showFailToast('请填写完整信息');
  }
};

const handleShowDefaultModal = () => {
  ModalPlatformType.show({
    title: '设置默认启动平台',
    options: statePlatform.value.data,
    value: params.value.platformType,
    emit: (option: PlatformTypeItem) => {
      params.value.platformType = option.platformType;
    },
  });
};

const handleDefaultCard = async () => {
  try {
    await platformRef.value.validate('platformType');
    showConfirmDialog({
      title: '提示',
      message: '确认设置默认启动平台？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(async () => {
      await handlePlatformDefault();
      window.location.reload();
    });
  } catch (error) {
    showFailToast('请填写完整信息');
  }
};

// ROOT
const handleCardProcessOrder = async () => {
  try {
    showConfirmDialog({
      title: '提示',
      message: '确认同步处理讯卡未处理订单？',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      handleProcessOrder();
    });
  } catch (error) {
    showFailToast('请填写完整信息');
  }
};
</script>
<style lang="less" scoped>
.app-config {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 16px;

  .sync-flash {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
  }

  .form {
    flex-grow: 1;

    .query {
      margin: 0 0 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }

  }
}
</style>
